<template>
  <!--有且仅有一个根节点
    {template:{'<div>'}}
  -->
    <div>
        子组件自己的数据：{{title}}
        父组件的数据： {{myMsg}}
      <br>
      调用子组件自己的函数： <button @click="btnClick">点我啊！！</button>
       <br>
      调用父组件自己的函数传值给父组件： <button @click="myFun('hello，我是你的宝宝！！')">点我啊(子传父)！！</button>
    </div>
</template>

<script>
    export default {
        name: "MyHeader",
        data(){
          return {title:"helloworld!!!!"};
        },
        props:{//声明父组件通过属性传子组件的数据
          myMsg:{
            type:String,
            default:"hello"
          },
          myFun:{//myFun  父组件传子组件的变量名
            type:Function //函数
          }
        },
        methods:{//子组件自己的函数
        btnClick(){
          alert('hello,我的第一个用vue-cli搭建的项目！！！');
        }
      }
    }
</script>

<style scoped>

</style>
